<template>
  <div>
    <!-- 个人介绍页 -->
    <div class="self">
      <!-- mine -->
       <van-image
          round
          width="2rem"
          height="2rem"
          src="./static/img/tx.jpeg"
          slot='icon'
          class="img"
        />
      <van-button class="btn" type="default">{{username}}</van-button>
      <van-button class="btn2" type="default">进入店铺主页</van-button>
      <van-button to="/mymessage" class="btn3" type="default">设置</van-button>
    </div>

    <!-- 花粉币 -->
    <van-cell
      title="花粉币"
      label="超值好物免费换"
      :center="true"
    >
      <van-image
        round
        width="1.5rem"
        height="1.5rem"
        src="./static/img/tx.jpeg"
        slot='icon'
      />
      <van-button round type="info" color="#FB8477" size="small">赚花粉币</van-button>
    </van-cell>

    <!-- 普通/花粉币商品 -->
    <van-tabs v-model="active" line-height="0" title-active-color="#FF6677">
      <van-tab title="普通商品">
        <van-grid>
          <van-grid-item to="/mypub">
            <div slot='text'>
              <h5>我发布的</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="bookmark" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to='/mysell'>
            <div slot='text'>
              <h5>我卖出的</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="point-gift" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to="mybuy">
            <div slot='text'>
              <h5>我买到的</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="send-gift" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to="myrefund">
            <div slot='text'>
              <h5>退款</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="gold-coin" color="#FF7486" />
          </van-grid-item>
        </van-grid>
      </van-tab>
      <van-tab title="花粉币商品">
        <van-grid>
          <van-grid-item to="mypub">
            <div slot='text'>
              <h5>我发布的</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="bookmark" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to="mysell">
            <div slot='text'>
              <h5>我卖出的</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="point-gift" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to="mybuy">
            <div slot='text'>
              <h5>我买到的</h5>
              <p v-if="num">0</p>
              <p v-else>0</p>
            </div>
            <van-icon slot='icon' size="24" name="send-gift" color="#FF7486" />
          </van-grid-item>
          <van-grid-item to="myrefund">
            <div slot='text'>
              <h5>退款</h5>
              <p>0</p>
            </div>
            <van-icon slot='icon' size="24" name="gold-coin" color="#FF7486" />
          </van-grid-item>
        </van-grid>
      </van-tab>
    </van-tabs>

    <!-- 小金库 -->
    <van-grid :column-num="4">
      <van-grid-item :to='value.to' v-for="value in boxs">
        <van-icon slot='icon' size="24" :name="value.icon" :color="value.color" />
        <span slot='text'>{{value.tit}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
  import * as get from '@/api/getProList.js';
  export default {
    name:'Mine',
    data(){
      return {
        username:'',
        num:'',
        active:4,
        boxs:[
          {
            tit:'收货地址',
            to:'/address',
            icon:'location-o',
            color:'#7FC8D4'
          },
          {
            tit:'订单',
            to:'/mybuy',
            icon:'label-o',
            color:'#FD916B'
          },
          {
            tit:'花语',
            to:'',
            icon:'flower-o',
            color:'#FF6677'
          },
          {
            tit:'购物车',
            to:'/cars',
            icon:'shopping-cart',
            color:'#FBB168'
          },
          {
            tit:'足迹',
            to:'',
            icon:'browsing-history',
            color:'#FE916B'
          },
          {
            tit:'我收藏的',
            to:'',
            icon:'like',
            color:'#FFAFBA'
          },
          {
            tit:'我关注的',
            to:'',
            icon:'manager',
            color:'#97BEFF'
          },
          {
            tit:'优惠券',
            to:'',
            icon:'bill-o',
            color:'#FD916B'
          },
          {
            tit:'Family',
            to:'',
            icon:'wap-home',
            color:'#FFAFC3'
          },
          {
            tit:'邀请有礼',
            to:'',
            icon:'invition',
            color:'#C9B079'
          },
          {
            tit:'联系客服',
            to:'',
            icon:'service',
            color:'#FFCC74'
          },
          {
            tit:'帮助中心',
            to:'',
            icon:'cluster',
            color:'#A0DDFD'
          }
        ]
      }
    },
    mounted(){
      this.$emit('getMsg',{active:this.active});
      let name = this.$store.state.message.username;
      this.username = name?name:'登录';
    }
  }
</script>

<style scoped>
.img{
  margin-top: 40px;
  margin-left: 10px;
}
.btn{
  position: absolute;
  top: 40px;
  left: 80px;
  background: 0;
  border: 0;
}
.btn2{
  position: absolute;
  top: 65px;
  left: 80px;
  background: 0;
  border: 0;
}
.btn3{
  position: absolute;
  top: 15px;
  right: 5px;
  background: 0;
  border: 0;
}
  .self{
    height: 120px;
    background: #ff0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url(http://www.juimg.com/tuku/yulantu/140508/330867-14050P3201270.jpg) 20px;
  }
  .van-cell__title{
    text-align: left;
    padding-left: 8px;
  }
</style>
